import * as PIXI from 'pixi.js';
import { GameConfig } from '../config';

export class UI {
    public container: PIXI.Container;
    private config: GameConfig;
    private timerText: PIXI.Text;
    private countdownText: PIXI.Text;
    private gameOverContainer: PIXI.Container;

    constructor(config: GameConfig) {
        this.config = config;
        this.container = new PIXI.Container();
        
        // 创建计时器
        this.timerText = this.createTimerText();
        this.container.addChild(this.timerText);
        
        // 创建倒计时
        this.countdownText = this.createCountdownText();
        this.container.addChild(this.countdownText);
        this.countdownText.visible = false;
        
        // 创建游戏结束界面
        this.gameOverContainer = this.createGameOverContainer();
        this.container.addChild(this.gameOverContainer);
        this.gameOverContainer.visible = false;
    }

    private createTimerText(): PIXI.Text {
        const style = new PIXI.TextStyle({
            fontFamily: 'Arial',
            fontSize: 24,
            fill: '#ffffff',
            stroke: '#000000',
            strokeThickness: 4,
        });
        
        const text = new PIXI.Text('Time: 0.0s', style);
        text.x = this.config.screenWidth - 150;
        text.y = 20;
        
        return text;
    }

    private createCountdownText(): PIXI.Text {
        const style = new PIXI.TextStyle({
            fontFamily: 'Arial',
            fontSize: 72,
            fill: '#ffffff',
            stroke: '#000000',
            strokeThickness: 6,
        });
        
        const text = new PIXI.Text('3', style);
        text.anchor.set(0.5);
        text.x = this.config.screenWidth / 2;
        text.y = this.config.screenHeight / 2;
        
        return text;
    }

    private createGameOverContainer(): PIXI.Container {
        const container = new PIXI.Container();
        
        // 背景
        const bg = new PIXI.Graphics();
        bg.beginFill(0x000000, 0.8);
        bg.drawRect(0, 0, this.config.screenWidth, this.config.screenHeight);
        bg.endFill();
        container.addChild(bg);
        
        // 游戏结束文本
        const gameOverStyle = new PIXI.TextStyle({
            fontFamily: 'Arial',
            fontSize: 48,
            fill: '#ffffff',
            stroke: '#000000',
            strokeThickness: 6,
        });
        
        const gameOverText = new PIXI.Text('Game Over', gameOverStyle);
        gameOverText.anchor.set(0.5);
        gameOverText.x = this.config.screenWidth / 2;
        gameOverText.y = this.config.screenHeight / 2 - 100;
        container.addChild(gameOverText);
        
        // 分数文本
        const scoreStyle = new PIXI.TextStyle({
            fontFamily: 'Arial',
            fontSize: 32,
            fill: '#ffffff',
        });
        
        const scoreText = new PIXI.Text('', scoreStyle);
        scoreText.anchor.set(0.5);
        scoreText.x = this.config.screenWidth / 2;
        scoreText.y = this.config.screenHeight / 2;
        container.addChild(scoreText);
        
        // 重试按钮
        const button = this.createButton('Try Again', this.config.screenWidth / 2, this.config.screenHeight / 2 + 100);
        container.addChild(button);
        
        return container;
    }

    private createButton(text: string, x: number, y: number): PIXI.Container {
        const button = new PIXI.Container();
        
        // 按钮背景
        const bg = new PIXI.Graphics();
        bg.beginFill(0x3498db);
        bg.drawRoundedRect(-100, -25, 200, 50, 10);
        bg.endFill();
        button.addChild(bg);
        
        // 按钮文本
        const style = new PIXI.TextStyle({
            fontFamily: 'Arial',
            fontSize: 24,
            fill: '#ffffff',
        });
        
        const buttonText = new PIXI.Text(text, style);
        buttonText.anchor.set(0.5);
        button.addChild(buttonText);
        
        // 设置位置
        button.x = x;
        button.y = y;
        
        // 设置交互
        button.eventMode = 'static';
        button.cursor = 'pointer';
        
        return button;
    }

    public updateTimer(time: number): void {
        this.timerText.text = `Time: ${(time / 1000).toFixed(1)}s`;
    }

    public showCountdown(onComplete: () => void): void {
        this.countdownText.visible = true;
        let count = 3;
        
        const updateCount = () => {
            if (count > 0) {
                this.countdownText.text = count.toString();
                count--;
                setTimeout(updateCount, 1000);
            } else {
                this.countdownText.visible = false;
                onComplete();
            }
        };
        
        updateCount();
    }

    public showGameOver(time: number, onRestart: () => void): void {
        // 显示游戏结束界面
        this.gameOverContainer.visible = true;
        
        // 更新分数
        const scoreText = this.gameOverContainer.getChildAt(2) as PIXI.Text;
        scoreText.text = `Time: ${(time / 1000).toFixed(1)}s`;
        
        // 设置重试按钮点击事件
        const button = this.gameOverContainer.getChildAt(3);
        button.addEventListener('pointertap', () => {
            this.gameOverContainer.visible = false;
            onRestart();
        });
    }
}